<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title> 保存和加载</title>
    <style type="text/css">
        body {
            margin: 0;
            overflow: hidden;
            background: #fff;
        }

        #map {
            position: relative;
            height: 510px;
            border: 1px solid #3473b7;
            left: 20%;
            width: 79.8%;
        }

        #toolbar {
            position: relative;
            padding-top: 5px;
            padding-bottom: 10px;
        }

        #menu {
            background: #ffffff;
            position: absolute;
            width: 19.8%;
            height: 510px;
            border: 1px solid #3473b7;
            border-right: none;
            text-align: center;
        }
    </style>

    <link href='./css/bootstrap.min.css' rel='stylesheet'/>
    <link href='./css/bootstrap-responsive.min.css' rel='stylesheet'/>
    <script src="../libs/SuperMap.Include.js"></script>
    <script src="./js/plottingPanel/PlottingPanel.Include.js"></script>
    <script type="text/javascript">
        var map, plottingLayer, layer,plotting,plotPanel,stylePanel, plottingEdits = [],drawGraphicObjects = [];
        var select, SMLName = null;
        var host = document.location.toString().match(/file:\/\//) ? "http://localhost:8090" : 'http://' + document.location.host;
        var mapurl = host + "/iserver/services/map-china400/rest/maps/China_4326";
        var serverUrl = host + "/iserver/services/plot-jingyong/rest/plot/";
        function init() {
            map = new SuperMap.Map("map", {
                controls: [
                    new SuperMap.Control.LayerSwitcher(),
                    new SuperMap.Control.ScaleLine(),
                    new SuperMap.Control.Zoom(),
                    new SuperMap.Control.Navigation({
                        dragPanOptions: {
                            enableKinetic: true
                        }
                    })]
            });
            layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", mapurl, {
                transparent: true,
                cacheEnabled: true
            }, {maxResolution: "auto"});
            layer.events.on({"layerInitialized": addLayer});
            //总控类
            plotting = SuperMap.Plotting.getInstance(map, serverUrl);
            sitManager = plotting.getSitDataManager();
            sitManager.events.on({"getSMLInfosCompleted": getSMLInfosSucess,
                "getSMLInfosFailed": getSMLInfosFail,
                "openSmlFileCompleted": openSuccess,
                "openSmlFileFailed": openFail,
                "saveSmlFileCompleted": saveSuccess,
                "saveSmlFileFailed": saveFail});
            plottingLayer = new SuperMap.Layer.PlottingLayer("标绘图层", serverUrl);
            plottingLayer.style = {
                fillColor: "#66cccc",
                fillOpacity: 0.4,
                strokeColor: "#66cccc",
                strokeOpacity: 1,
                strokeWidth: 3,
                pointRadius: 6
            };
            //态势标绘编辑
            var plottingEdit = new SuperMap.Control.PlottingEdit(plottingLayer);
            plottingEdits.push(plottingEdit);

            // 绘制标号;
            var drawGraphicObject = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.GraphicObject);
            drawGraphicObjects.push(drawGraphicObject);
            //添加态势标绘控件
            map.addControls([plottingEdit, drawGraphicObject]);
        }
        function addLayer() {
            map.addLayers([layer, plottingLayer]);
            map.setCenter(new SuperMap.LonLat(104, 35), 3);
            //创建标绘面板
            plotPanel = new SuperMap.Plotting.PlotPanel("plotPanel", serverUrl, map);
            plotPanel.events.on({"initializeCompleted": initializeCompleted});
            plotPanel.initializeAsync();
            //创建属性面板
            stylePanel = new SuperMap.Plotting.StylePanel("stylePanel");
            stylePanel.addEditLayer(plottingLayer);

            //获取标号的列表
            getSMLInfos();
        }
        function initializeCompleted() {
            if (drawGraphicObjects.length > 0) {
                plotPanel.setDrawFeature(drawGraphicObjects[0]);
            }
        }
        //取消标绘
        function plottingAllDeactivate() {
            for (var i = 0; i < drawGraphicObjects.length; i++) {
                drawGraphicObjects[i].deactivate();
            }
            for (var i = 0; i < plottingEdits.length; i++) {
                plottingEdits[i].deactivate();
            }
        }
        //取消标绘，激活标绘编辑控件
        function PlottingDrawCancel() {
            plottingAllDeactivate();
            for (var i = 0; i < plottingEdits.length; i++) {
                plottingEdits[i].activate();
            }
        }

        function getSMLInfos() {
            sitManager.getSMLInfos(0, 10);
        }

        function getSMLInfosSucess(result) {
            select = document.getElementById("SLT");
            while (select.hasChildNodes()) {
                select.removeChild(select.firstChild);
            }
            for (var i = 0, len = result.length; i < len; i++) {
                var options = document.createElement("option");
                options.setAttribute("value", result[i].SMLFileName);
                options.innerHTML = result[i].SMLFileName;
                select.appendChild(options);
            }
            return false;
        }
        function getSMLInfosFail(result) {
            console.log(result);
        }

        //态势图保存
        function save() {
            plottingAllDeactivate();
            sitManager.saveSmlFile();
        }
        //态势图另存为
        function SaveAsSmlFile() {
            plottingAllDeactivate();
            SMLName = document.getElementById("txt").value;
            if (SMLName.length !== 0) {
                sitManager.saveAsSmlFile(SMLName);
            } else {
                alert("请输入另存为态势图的名字");
            }
        }

        function saveSuccess(){
            getSMLInfos();
        }

        function saveFail(){

        }

        //加载态势图
        function loadSimulationMap() {
            var select = document.getElementById("SLT");
            for (var i = 0; i < select.children.length; i++) {
                if (select.children[i].selected) {
                    sitManager.openSmlFileOnServer(select.children[i].value);

                }
            }
        }

        function openSuccess() {
            var sitDataLayers = sitManager.getSitDataLayers();
            plottingEdits = [];
            drawGraphicObjects = [];
            for (var i = 0; i < sitDataLayers.length; i++) {
                plottingEdits.push(sitDataLayers[i].plottingEdit);
                drawGraphicObjects.push(sitDataLayers[i].drawGraphicObject);
                stylePanel.addEditLayer(sitDataLayers[i]);
            }
            plotPanel.setDrawFeature(drawGraphicObjects[0]);
        }

        function openFail() {
            console.log("error");
        }

        //清空绘制
        function PlottingClear() {
            plottingAllDeactivate();
            for (var i = 0; i < map.layers.length; i++) {
                if (map.layers[i].CLASS_NAME === "SuperMap.Layer.PlottingLayer") {
                    map.layers[i].removeAllFeatures();
                }
            }
        }
        document.oncontextmenu = function () {
            PlottingDrawCancel();
            return false;
        };
    </script>
</head>
<body onLoad="init()">
<div id="toolbar">
    <select class="search-query" style="width: 100px; margin-bottom: 0;" id="SLT"></select>
    <input type="button" class="btn" value="加载" onclick="loadSimulationMap()"/>


    <input type="button" class="btn" value="取消标绘" onclick="PlottingDrawCancel()"/>
    <input type="button" class="btn" value="清除" onclick="PlottingClear()"/>

    <input type="button" class="btn " value="保存" onclick="save()"/>
    <input type="button" class="btn" value="另存为：" onclick="SaveAsSmlFile()"/>
    <input type="text" id="txt" style="margin-bottom: 0; width: 100px;" />

</div>
<div id="menu">
    <div class="easyui-panel" style="position:absolute;top:0px;bottom:0px;left:0px;right:0px;padding:5px; width: 100%;">
        <div class="easyui-tabs" style="width: 100%;height: 100%">
            <div id="plotPanel" title="标绘面板" style="overflow: hidden"></div>
            <div id="stylePanel" title="属性面板"></div>
        </div>
    </div>
</div>

<div id="map"></div>

</body>
</html>

